<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrap {
        width: 100%;
        display: flex;
        margin: 0.2rem 0 0 0;
        position: relative;
      }

      /*左侧的导航样式*/
      .nav_left {
        width: 21.1875rem;
        overflow: scroll;
      }

      .nav_left::-webkit-scrollbar {
        display: none;
      }

      .nav_content {
        white-space: nowrap;
        padding: 0 0.7rem;
      }

      .nav_content span {
        display: inline-block;
        padding: 0.4rem 0.6rem;
        font-size: 0.875rem;
      }

      .nav_content .active {
        border-bottom: 2px solid #7f4395;
        color: #7f4395;
      }

      .nav_left,
      .down {
        float: left;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="wrap">
        <div class="nav_left" id="navLeft">
          <div class="nav_content">
            <span
              @click="activeIndex=index"
              :class="{active:activeIndex===index}"
              v-for="(item,index) in arr"
              :key="item.id"
              >{{item.first_name}}</span
            >
          </div>
        </div>
      </div>
    </div>
    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          activeIndex: 0,
          arr: [
            {
              first_id: '0',
              first_name: '热门'
            },
            {
              first_id: '621',
              first_name: '\u5496\u5561'
            },
            {
              first_id: '627',
              first_name: '\u996e\u98df'
            },
            {
              first_id: '279',
              first_name: '\u7537\u88c5'
            },
            {
              first_id: '294',
              first_name: '\u5973\u88c5'
            },
            {
              first_id: '122',
              first_name: '\u773c\u955c'
            },
            {
              first_id: '339',
              first_name: '\u5185\u8863\u914d\u9970'
            },
            {
              first_id: '391',
              first_name: '\u6bcd\u5a74'
            },
            {
              first_id: '35',
              first_name: '\u978b\u9774'
            },
            {
              first_id: '39',
              first_name: '\u8fd0\u52a8'
            },
            {
              first_id: '153',
              first_name: '\u7bb1\u5305'
            },
            {
              first_id: '119',
              first_name: '\u7f8e\u5986\u4e2a\u62a4'
            },
            {
              first_id: '355',
              first_name: '\u5bb6\u7eba'
            },
            {
              first_id: '51',
              first_name: '\u9910\u53a8'
            },
            {
              first_id: '334',
              first_name: '\u7535\u5668'
            },
            {
              first_id: '369',
              first_name: '\u5bb6\u88c5'
            },
            {
              first_id: '10',
              first_name: '\u5bb6\u5177'
            },
            {
              first_id: '223',
              first_name: '\u6570\u7801'
            },
            {
              first_id: '429',
              first_name: '\u6c7d\u914d'
            },
            {
              first_id: '546',
              first_name: '\u5065\u5eb7\u4fdd\u5065'
            },
            {
              first_id: '433',
              first_name: '\u5b9a\u5236'
            }
          ]
        }
      })
    </script>
  </body>
</html>
